<!--
 * @Author: 贾博林 11457230+jabolin@user.noreply.gitee.com
 * @Date: 2023-03-29 10:14:13
 * @LastEditors: 贾博林 11457230+jabolin@user.noreply.gitee.com
 * @LastEditTime: 2023-03-31 09:40:30
 * @FilePath: \zs-grouting2\naive-ui-admin\src\modules\system\department\department.vue
 * @Description: 用户管理
-->
<template>
  <!-- 弹性盒 -->
  <div class="page p-2" style="width: 100%">
    <!-- 左侧数据 -->
    <div class="left" style="width: 15%">
      <!-- tree树 -->
      <n-tree
    block-line
    :data="data"
    selectable
    />
     </div>
     <!-- 右侧数据 -->
    <div class="right" style="width: 85%">
         <BFCurd
      ref="bfCurd"
      :form="{ template: formState.template! }"
      :table="{ 
        rowKey: 'id',
        columns: [
         { type: 'selection' },
         { title: '姓名', key: 'departmentName',  },
         { title: '用户名', key: 'departmentDesc', },
         { title: '手机号', key: 'departmentLogo',  },
         { title: '年龄',   key: 'apiBaseUrl',    },
         { title: '所属公司', key: 'databaseUrl', },
         { title: '电子签名', key: 'databaseUserName', },
         { title: '创建时间', key: 'databasePassword', },
        ],
        selectRowKeys: tableState.selectKeys!
      }"
      :r="r"
      :c="c"
      :u="u"
      :d="d"
      @page-btn-click="pageBtnClick"
    >
      <!-- <template #applicationLogo="{ rowData }">
        <n-image width="100" :src="rowData.applicationLogo" />
      </template> -->
    </BFCurd>
    </div>
    
 
  </div>
</template>

<script setup lang="ts">
import {
  BFCurdExpose,
  BFCurdOperaBtn,
  PageBtnClickCallbackFn,
  PageBtnClickData
} from '@/components/bf-curd/src/bf-curd'
import { getUploadFiles, transformToUploadFileList } from '@/modules/common/common'
import { onMounted, ref } from 'vue'
import { Application } from './user.controller'
import { r, c, u, d, tableState, formState, init, ApplicationService } from './user.service'
import { NImage } from 'naive-ui'

const bfCurd = ref<BFCurdExpose<Application>>()
let _currentOpera = ''
init()
ApplicationService.getDepartmentList()

const pageBtnClick = async (
  btn: BFCurdOperaBtn,
  e: PageBtnClickData<Application>,
  callBack?: PageBtnClickCallbackFn
) => {
  console.log(btn, e)
  switch (btn.opera) {
    case 'add':
      _currentOpera = 'add'
      bfCurd.value?.setFormData({ applicationLogo: [] })
      bfCurd.value?.showModal()
      break
    case 'edit': {
      _currentOpera = 'edit'
      let applicationLogo = transformToUploadFileList(e.rowData!.applicationLogo)
      bfCurd.value?.setFormData({ ...e.rowData, applicationLogo })
      bfCurd.value?.showModal()
      break
    }
    case 'delete':
      callBack!('d', { prompt: '你确定要删除此应用吗?', data: [e.rowData!.id] })
      break
    case 'bulk-delete':
      callBack!('d', { prompt: '你确定要删除这些应用嘛?', data: e.selectKeys })
      break
    case 'confirm': {
      let applicationLogo = getUploadFiles(e.formdata!.applicationLogo)[0] || ''
      let action = await callBack!(_currentOpera === 'add' ? 'c' : 'u', {
        ...e.formdata,
        applicationLogo
      })
      if (action) {
        bfCurd.value?.hideModal()
      }
      break
    }
  }
}

onMounted(() => {
  bfCurd.value?.deletePageBtn('leftBtns', 2)
  bfCurd.value?.deletePageBtn('rightBtns', 0)
})

// 定义树
const data = ref([
  {
    key: 1,
    label: '中水',
    children: [
      { key: 2, label: '开发部' },
      { key: 3, label: '管理部' },
      { key: 4, label: '检测部' },
      { key: 5, label: '业主部' }
    ]
  }
])
</script>

<style scoped lang="scss">
.page{
  display: flex;
  .left{
    // background-color: red;
  }
  .right{
    // background-color: rgb(130, 27, 255);
  }
}
</style>
